<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>

	<body>
		<div id="app">
			<cpn :c-info='info' :child-my-message='message'></cpn>
		</div>
	</body>
	<template id="cpn">
		<div>
			<div>{{cInfo}}</div>
			<div>{{childMyMessage}}</div>
		</div>
	</template>
<script type="text/javascript">
	const cpn = {
		template: '#cpn',
		data() {
			return {
				
			}
		},
		props:{
			cInfo: {
				type: Object,
				default(){
					return {}
				}
			},
			childMyMessage: {
				type: String,
				default: ""
			}
		}
	}
	const app = new Vue({
		el:"#app",
		data:{
			info: {
				name:'why',
				age: 18,
				height: 1.88
			},
			message: 'hahahah'
		},
		components:{
			cpn
		}
	})
</script>
</html>
